<template>
	<login-register title="密码重置" tips="输入您的电子邮件以恢复您的密码">
		<el-form ref="form" :rules="formRules" :model="formData">
			<el-form-item prop="account">
				<el-input prefix-icon="sw-icon-login-email" placeholder="请输入您的电子邮件" v-model="formData.account" :disabled="isSendVerityCode" />
			</el-form-item>
			<el-form-item prop="accode">
				<sw-custom-input type="capital" prefix-icon="sw-icon-verify-code" maxlength="4" placeholder="请输入验证码" v-model="formData.accode" />
				<el-button class="verify" :disabled="isSendVerityCode" @click="handleGetVerifyCode()" :loading="sendLoading">
					{{ isSendVerityCode ? `${sendData.time}秒后重新获取` : '获取验证码' }}
				</el-button>
			</el-form-item>
			<el-form-item prop="password">
				<el-input prefix-icon="sw-icon-login-pass" show-password placeholder="请输入您的登录密码" v-model="formData.password" />
			</el-form-item>
			<el-form-item prop="confirmpass">
				<el-input prefix-icon="sw-icon-login-pass" show-password placeholder="请输入您的确认密码" v-model="formData.confirmpass" />
			</el-form-item>
			<el-form-item>
				<el-button class="submit" type="primary" @click="handleSubmitReset" :loading="btnLoading">确定</el-button>
			</el-form-item>
		</el-form>
	</login-register>
</template>

<script>
import lodash from 'lodash';
import rsa from '@/utils/rsa';
import { mapGetters } from 'vuex';
import { resetUserPass } from '@/api/openApi';
import loginRegister from '@/views/common/loginRegister';
export default {
	components: { loginRegister },
	data() {
		const passRule = this.$getPassRules();
		const passValidator = (rule, value, callback) => {
			if (!this.formData.password) {
				callback(new Error('请输入登录密码'));
			} else if (this.formData.password !== value) {
				callback(new Error('登录密码和确认密码不一致'));
			} else {
				callback();
			}
		};
		return {
			timer: null,
			formData: {},
			formRules: {
				account: [
					{ required: true, message: '请输入电子邮件地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur' }
				],
				accode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入登录密码', trigger: 'blur' },
					{ pattern: passRule.rules, message: passRule.message, trigger: 'blur' }
				],
				confirmpass: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{ validator: passValidator, trigger: 'blur' }
				]
			},
			sendLoading: false,
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['siteInfo', 'sendData']),
		isSendVerityCode() {
			return !lodash.isEmpty(this.sendData) && this.sendData.time > 0;
		}
	},
	mounted() {
		if (!!this.isSendVerityCode) {
			this.verityCountDown(this.sendData);
			this.formData.account = this.sendData.account;
		}
	},
	methods: {
		//获取验证码倒计时
		verityCountDown(data) {
			!!this.timer && clearInterval(this.timer);
			this.timer = setInterval(() => {
				if (data.time > 0) {
					data.time--;
				} else {
					clearInterval(this.timer);
				}
				this.$store.commit('SET_VERITY_CODE', data);
			}, 1000);
		},

		//获取找回验证码
		handleGetVerifyCode() {
			this.$refs['form'].validateField('account', (valid) => {
				if (valid) return false;
				this.sendLoading = true;
				this.sendVerifyCodeRequest();
			});
		},

		//发送验证码到邮箱
		async sendVerifyCodeRequest() {
			let params = { account: this.formData.account };
			this.$store.dispatch('sendCodeRequest', params).then((flag) => {
				this.sendLoading = false;
				flag && this.verityCountDown({ account: params.account, time: 180 });
			});
		},

		//提交重置
		handleSubmitReset() {
			this.$refs['form'].validate((vaild) => {
				if (!vaild) return false;
				this.btnLoading = true;
				this.resetPasswordRequest();
			});
		},

		formatResetParams() {
			let params = this.$deepClone(this.formData);
			params['password'] = rsa.rsaPublicData(params.password);
			delete params.confirmpass;
			return params;
		},

		async resetPasswordRequest() {
			let params = this.formatResetParams();
			let result = await resetUserPass(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$showCustomMessage('success', '密码重置成功！');
				this.$router.replace('/login');
			}
		}
	}
};
</script>
